<template>
  <div>
    <el-container>
      <el-header id="header">
        <div id="order_top">
          站点端管理页面
        </div>
      </el-header>

      <el-container id="container">
        <el-aside style="background-color: aquamarine;width: 15%;height: 100%;">
          <el-row>
            <el-col :span="24" style="height: 690px;">
              <el-menu style="height: 100%;" default-active="1" class="el-menu-vertical-demo" @open="handleOpen"
                @close="handleClose" background-color="#ffffff" text-color="#000000" active-text-color="#ffaa00">

                <el-menu-item index="1" v-if="siteAccountDTO.peopleRole==3" @click="toTakingOrder">
                  <i class="el-icon-location"></i>
                  <span slot="title" class="order_menu_item" >待接单的订单</span>
                </el-menu-item>

                <el-menu-item index="2" v-if="siteAccountDTO.peopleRole==3" @click="toSiteOrderList">
                  <i class="el-icon-menu"></i>
                  <span slot="title" class="order_menu_item" >该站点的订单</span>
                </el-menu-item>

                <el-menu-item index="3" v-if="siteAccountDTO.peopleRole==3" @click="toSiteOrderSend">
                  <i class="el-icon-document"></i>
                  <span slot="title" class="order_menu_item" >派单给回收员</span>
                </el-menu-item>

                <el-menu-item index="4" v-if="siteAccountDTO.peopleRole==3" @click="toSiteOrderComment">
                  <i class="el-icon-setting"></i>
                  <span slot="title" class="order_menu_item" >订单评论信息</span>
                </el-menu-item>

                <el-menu-item index="5" v-if="siteAccountDTO.peopleRole==3" @click="toSiteOrderTrans">
                  <i class="el-icon-setting"></i>
                  <span slot="title" class="order_menu_item" >订单资金流水</span>
                </el-menu-item>

                <el-menu-item index="6" v-if="siteAccountDTO.peopleRole==3" @click="toSiteInfo">
                  <i class="el-icon-setting"></i>
                  <span slot="title" class="order_menu_item"    >站点详细信息</span>
                </el-menu-item>

                <el-menu-item index="7" v-if="siteAccountDTO.peopleRole==3&&siteAccountDTO.siteRole==0" @click="siteToSiteAccount">
                  <i class="el-icon-setting"></i>
                  <span slot="title" class="order_menu_item">管理人员信息</span>
                </el-menu-item>

                <el-menu-item index="8" v-if="siteAccountDTO.peopleRole==3" @click="toRecycleAcoount">
                  <i class="el-icon-setting"></i>
                  <span slot="title" class="order_menu_item"  >管理工作人员</span>
                </el-menu-item>

                <el-menu-item index="9" v-if="siteAccountDTO.peopleRole==3"   @click="toSiteKinds">
                  <i class="el-icon-setting"></i>
                  <span slot="title" class="order_menu_item">站点类别管理</span>
                </el-menu-item>

                <el-menu-item index="10" v-if="siteAccountDTO.peopleRole==4" @click="toRecycleOrderManage">
                  <i class="el-icon-setting"></i>
                  <span slot="title" class="order_menu_item" >查看管理订单</span>
                </el-menu-item>

                <el-menu-item index="11"  v-if="siteAccountDTO.peopleRole==4" @click="toRecycleInfo">
                  <i class="el-icon-setting"></i>
                  <span slot="title" class="order_menu_item" >工作人员信息</span>
                </el-menu-item>

                <el-menu-item index="12"  v-if="siteAccountDTO.peopleRole==4"  @click="RecycleSelectSite">
                  <i class="el-icon-setting"></i>
                  <span slot="title" class="order_menu_item">查看站点信息</span>
                </el-menu-item>

                <el-menu-item index="13"  v-if="siteAccountDTO.peopleRole==3" @click="siteExitLogin">
                  <i class="el-icon-setting"></i>
                  <span slot="title" class="order_menu_item" >站点退出登录</span>
                </el-menu-item>

                <el-menu-item index="14"  v-if="siteAccountDTO.peopleRole==4" @click="recycleExitLogin">
                  <i class="el-icon-setting"></i>
                  <span slot="title" class="order_menu_item" >回收员退出登录</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>

        </el-aside>


        <el-main style=" background-color: bisque;width: 85%;height: 100%;">
          <template>
            <div>
              <router-view></router-view>
            </div>
          </template>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        siteAccountDTO:{},//账号对象
      }
    },
    methods: {
      //检查账号
      checkAccount(){
        if (localStorage.getItem("ecologyToken") != null) {
          let accountDTO = JSON.parse(localStorage.getItem("siteAccountMessage"))
          if (accountDTO == null) {
            this.$router.push("/index")
          } else {
            this.getSiteAccount()
          }
        } else {
          alert("请先登录")
          this.$router.push("/index")
        }
      },
      //获取账号角色
      getSiteAccount(){
        if (localStorage.getItem("siteAccountMessage") != null) {
          let siteAccount = JSON.parse(localStorage.getItem("siteAccountMessage"))
          if (siteAccount != null) {
            this.siteAccountDTO = siteAccount
          }
        }
      },
      //回收员查看管理自己的订单页面
      toRecycleOrderManage(){
        this.$router.push("/recycleOrderManage").catch(error =>{
          console.log("重复导航")
        })
      },
      //订单资金流水
      toSiteOrderTrans(){
        this.$router.push("/siteOrderTrans").catch(error =>{
          console.log("重复导航")
        })
      },
      //订单评论信息
      toSiteOrderComment(){
        this.$router.push("/siteOrderComment").catch(error =>{
          console.log("重复导航")
        })
      },
      // 派单给回收员
      toSiteOrderSend(){
        this.$router.push("/siteOrderSend").catch(error =>{
          console.log("重复导航")
        })
      },
      // 该站点的订单
      toSiteOrderList(){
        this.$router.push("/siteOrderList").catch(error =>{
          console.log("重复导航")
        })
      },
      // 待接单的订单
      toTakingOrder(){
        this.$router.push("/siteOrderTaking").catch(error => {
          console.log("请勿重复导航");
        });
      },

      // 站点查看回收员信息
      toRecycleAcoount(){
        this.$router.push("/siteSelectRecycle").catch(error => {
          console.log("请勿重复导航");
        });
      },

      // 站点信息
      toSiteInfo(){
        this.$router.push("/siteInfo").catch(error => {
          console.log("请勿重复导航");
        });
      },

      //站点查询站点类别信息
      toSiteKinds(){
        this.$router.push("/siteKinds").catch(error => {
          console.log("请勿重复导航");
        });
      },
      
      
      //站点查询站点账号信息
      siteToSiteAccount(){
        this.$router.push("/siteSelectSiteAccount").catch(error => {
          console.log("请勿重复导航");
        });
      },

      // 回收员信息
      toRecycleInfo(){
        this.$router.push("/recycleInfo").catch(error => {
          console.log("请勿重复导航");
        });
      },

      //回收员查看站点信息
      RecycleSelectSite(){
        this.$router.push("/RecycleSelectSite").catch(error => {
          console.log("请勿重复导航");
        });
      },

      //站点退出登录
      siteExitLogin(){
        this.$http.post("/site/siteAccount/logout.site").then(resp=>{
          localStorage.removeItem("ecologyToken")
          localStorage.removeItem("siteAccountMessage")
          this.$router.push("/index")
        })
      },

      //回收员退出登录
      recycleExitLogin(){
        this.$http.post("/site/recycleAccount/logout.recycle").then(resp=>{
          localStorage.removeItem("ecologyToken")
          localStorage.removeItem("siteAccountMessage")
          this.$router.push("/index")
        })
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    created() {
      this.checkAccount()
    }
  }
</script>

<style>
  .order_menu_item {
    font-size: 15px;
  }

  #order_top {
    text-align: center;
    line-height: 60px;
    font-size: 25px;
    background: linear-gradient(126deg,#fff5c3,#9452a5);
    /* background-color: #dcdcdc; */
    width: 100%;
    height: 100%;
  }


  #header {
    padding: 0%;
    height: 80px;
  }

  #container {
    width: 100%;
    height: 690px;
  }
</style>
